<template>
    <div class="container">
      <h3>登入页面</h3>
      <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="form.code"></el-input><el-button type="primary" @click="sms">获取验证码</el-button>
      </el-form-item>
      </el-form>
      <el-button type="primary" @click="login">登入</el-button>
    </div>
</template>

<script>
import Axios from 'axios';
export default {
    name: '',
    data() {
        return {
          form:{
            mobile:'',
            code:'',
          }
        };
    },
    props: {},

    components: {},

    created() {},

    mounted() {},

    methods: {
      sms(){
        Axios.get('sms/' + this.form.mobile + '/')
        .then(res => {
          console.log(res)
          if (res.data.code == 200){
            this.$notify({
              title: '成功',
              message: '验证码发送成功',
              type: 'success'
            });
          }
        })
        .catch(err => {
          console.log(err)
        })
      },
      login(){
        Axios.post('login/' , this.form)
        .then(res => {
          console.log(res)
          if (res.data.code == 200){
            localStorage.setItem('name',res.data.name)
            localStorage.setItem('token',res.data.token)
            this.$notify({
              title: '成功',
              message: '登入成功',
              type: 'success'
            });
            this.$router.push('/about')
          }
        })
        .catch(err => {
          console.log(err)
        })
      }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped lang="scss"></style>

